<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #333;
        }
        .box {
            width: 1220px;
            height: 350px;
            background-color: #333;
            margin: 50px auto;
            box-shadow: 1px 1px 20px #458fc0;
            position: relative;
            overflow: hidden;
            animation: myfirst 3s;
            animation: myfirst2 6s;
        }
        .box ul {
            list-style: none;
            width: 3000px;
            position: absolute;
        }
        .box ul li {
            float: left;
            margin-right: 5px;
        }
        @keyframes myfirst {
        from {box-shadow: 1px 1px 20px #458fc0;}
        to {box-shadow: 1px 1px 20px #c0459b;}
        }
        @keyframes myfirst2 {
        from {box-shadow: 1px 1px 20px #c0459b;}
        to {box-shadow: 1px 1px 20px #458fc0;}
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#"><img src="01.jpg" alt="阿勒？图片不见了!"></a></li>
            <li><a href="#"><img src="02.jpg" alt="阿勒？图片不见了!"></a></li>
            <li><a href="#"><img src="03.jpg" alt="阿勒？图片不见了!"></a></li>
            <li><a href="#"><img src="04.jpg" alt="阿勒？图片不见了!"></a></li>
        </ul>
        <!-- <button class="btn1"></button> -->
    </div>
</body>
</html>
<script>
    var imgs = document.getElementsByTagName("img");
    var speed = 10;
    $(".box ul li").clone().appendTo($(".box ul"));
    console.log("复制成功```");
    var idx = 1;
    var timer;
    timer = setInterval(function(){
        idx-=5;
        idx = idx<=-1220 ? 0:idx;
        $(".box ul").css({"left":idx});
        $(".box").mouseenter(function(){
            clearInterval(timer);
            timer = setInterval(function(){
                idx-=1;
                idx = idx<=-1220 ? 0:idx;
                $(".box ul").css({"left":idx});
                },40);
            console.log("鼠标进入box区域");
        });
        $(".box").mouseleave(function(){
            clearInterval(timer);
            timer = setInterval(function(){
                idx-=5;
                idx = idx<=-1220 ? 0:idx;
                $(".box ul").css({"left":idx});
                },10);
            console.log("鼠标离开box区域");
        });
    },speed);
    for(var i = 0 ; i < imgs.length ; i++){
        imgs[i].onmouseenter = function(){
            this.id = i;
            this.style.position = "relative";
            this.style.width = 320+"px";
            console.log("图片"+this.id+"被点击了");
        }
        imgs[i].onmouseleave = function(){
            this.style.position = "static";
            this.id = i;
            this.style.width = 300+"px";
            console.log("图片"+this.id+"离开了鼠标");
        }
    }
</script>